<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
事件捕获：div元素上也绑定了一个在捕获阶段触发的事件监听器。事件捕获是从最外层元素开始，逐级向下直到触发事件的元素。
但是在这个示例中，由于捕获阶段不会显示任何不同（点击div外部没有其他元素来演示捕获），所以这部分可能不会有可见的效果。

理解:
事件捕获（抓鱼）：这个过程可以比喻为“抓鱼”。在事件捕获阶段，事件从最外层的元素（比如整个文档）开始，
逐级向下传递到目标元素（比如您的button）。在您的比喻中，手代表事件的传递过程，它必须穿过“水”（父元素，如div），
最终到达“鱼”（目标元素，如button）。这个过程表明事件处理是从外层元素开始向内层元素传递。

事件冒泡（带走水滴）：事件冒泡则相反，是从最具体的元素（目标元素，如button）开始，
然后逐级向上传递到最不具体的元素（如文档的根）。在您的比喻中，当您抓到“鱼”（点击button）时，
手上可能会带走一些“水滴”（事件会传递给父元素，如div），这就是事件冒泡。

阻止事件冒泡（甩干净水滴）：在您的比喻中，阻止事件冒泡就像是在抓到鱼之后，
立即把手上的水滴甩干净，这样水就不会继续传递上去。在实际的事件处理中，
这相当于在事件处理函数中调用event.stopPropagation()，阻止事件继续向上传递。

总的来说，您的比喻是一个很好的方式来形象地理解这两个概念，尽管在实际的事件处理中，这些过程都是在代码和DOM元素层面上进行的。
-->
<div style="width: 300px; height: 300px; background-color: red;">
  父元素div
  <button style="margin-top: 50px;">点我</button>
</div>

<script src="script.js"></script>
</body>
<script>
  document.querySelector('div').addEventListener('click', () => {
    alert('事件冒泡到了父元素div');
  }, false); // 这里的false表示在冒泡阶段监听事件

  document.querySelector('button').addEventListener('click', (event) => {
    alert('点击了button');
    event.stopPropagation(); // 阻止事件继续冒泡
  }, false);

  document.querySelector('div').addEventListener('click', () => {
    alert('事件在捕获阶段到达了父元素div');
  }, true); // 这里的true表示在捕获阶段监听事件

</script>
</html>
